<template>
  <div class="app-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="dataForm"
      status-icon
      label-width="300px"
    >
      <el-tabs tab-position="left">
        <el-tab-pane label="首页配置">
          <el-form-item label="待报价栏目显示数量" prop="litemall_wx_index_purchase">
            <el-input v-model="dataForm.litemall_wx_index_purchase" />
          </el-form-item>
          <el-form-item label="待报价为0时背景图" prop="litemall_wx_index_purchase_bg">
            <el-upload
              :headers="headers"
              :action="uploadPath"
              :show-file-list="false"
              :on-success="uploadUrl"
              :before-upload="checkFileSize"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img v-if="dataForm.litemall_wx_index_purchase_bg" :src="dataForm.litemall_wx_index_purchase_bg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1024kb</div>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="我的-关于我们配置">
          <el-form-item label="公司信息图片" prop="litemall_wx_about_info_bg">
            <el-upload
              :headers="headers"
              :action="uploadPath"
              :show-file-list="false"
              :on-success="uploadUrl2"
              :before-upload="checkFileSize"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif"
            >
              <img v-if="dataForm.litemall_wx_about_info_bg" :src="dataForm.litemall_wx_about_info_bg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1024kb</div>
            </el-upload>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="update">确定</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { listWx, updateWx } from '@/api/config'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'

export default {
  name: 'ConfigWx',
  data() {
    return {
      uploadPath,
      dataForm: {
        litemall_wx_index_purchase: 10,
        litemall_wx_index_purchase_bg: '',
        litemall_wx_about_info_bg: ''
      },
      rules: {
        litemall_wx_index_purchase: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        litemall_wx_index_purchase_bg: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        litemall_wx_about_info_bg: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Postermin-Token': getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init: function() {
      listWx().then(response => {
        this.dataForm = response.data.data
      })
    },
    cancel() {
      this.init()
    },
    update() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.doUpdate()
      })
    },
    uploadUrl: function(response) {
      this.dataForm.litemall_wx_index_purchase_bg = response.data.url
    },
    uploadUrl2: function(response) {
      this.dataForm.litemall_wx_about_info_bg = response.data.url
    },
    checkFileSize: function(file) {
      if (file.size > 1048576) {
        this.$message.error(`${file.name}文件大于1024KB，请选择小于1024KB大小的图片`)
        return false
      }
      return true
    },
    doUpdate() {
      updateWx(this.dataForm)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '小程序配置成功'
          })
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    }
  }
}
</script>

<style>
.avatar-uploader {
  width: 260px !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>
